<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
 ! Excerpted from "Mastering Dojo",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/rgdojo for more book information.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Justa Cigar Wish List With Searching</title>
<style type="text/css">
    @import "/dojoroot/dijit/themes/tundra/tundra.css";
    @import "/dojoroot/dojo/resources/dojo.css";
    @import "/dojoroot/dojox/grid/_grid/tundraGrid.css";
</style>
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"  djConfig="parseOnLoad: true"></script>
<script>
    dojo.require("dojo.parser");
    
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.Grid");
    dojo.require("dojox.grid._data.model");
    
    dojo.require("dojo.io.script");
    
</script>
<style>

#grid { 
    border: 1px solid #333;
    width: 550px;
    margin: 10px;
    height: 200px;
    font-size: 0.9em;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    
}

</style>

</head>
<body class="tundra">

<h1>Justa Cigar Corporation</h1>
<h3>"Sometimes a cigar is a Justa Cigar!"</h3>


<div dojoType="dojo.data.ItemFileReadStore" jsId="wishStore"
    url="services/cigar_wish_list.json"></div>
<div dojoType="dojox.grid.data.DojoData" jsId="wishModel"
    store="wishStore" query="{ wishId: '*' }" clientSort="true"></div>



<table id="grid" dojoType="dojox.grid.Grid" store="wishStore" 
     query="{ wishId: '*' }" clientSort="true">
    <script type="dojo/connect" event="onRowClick" args="evt">
        var searchTerms = this.model.getRow(evt.rowIndex).description;
        
        dojo.io.script.get({
            // URL for Yahoo Search 
            url: "http://search.yahooapis.com/WebSearchService/V1/webSearch",

           // Send search term parameters:
            content: {
                appid: "DEMO", 
                query: searchTerms,  
                output: "json"
            },      

            // If the response takes longer than 10000ms (= 10 seconds), error out
            timeout: 10000,

            // Yahoo API requires you to send the callback function name in the 
            // parameter "callback"
            callbackParamName: "callback",

            // The load and error functions will be filled in here
            
            
            // Function runs when Yahoo returns with the answer
            load: function(searchResult) {
               // Zero out the current list
               listNode = dojo.byId("resultUl");
               listNode.innerHTML = "";

               dojo.forEach(searchResult.ResultSet.Result, function(result) {
                   var listItem = document.createElement("li");
                   listItem.innerHTML =
                      dojo.string.substitute(
                          "<a href='${Url}'>${Title}</a><br/>${Summary}", 
                          result
                      );
                   listNode.appendChild(listItem);
               });
            },

           // And this is the callback used when a web service communication error or
           // timeout occurs.  Note that errors returned from Yahoo in the response
           // are still handled with load()
           error: function(text) {
              alert("An error has occurred.");
              return text;
           }
        
        });
       
       
        </script>
    <thead>
       <tr>
          <th field="description" width="15em">Cigar</th> 
          <th field="size">Length/Ring</th> 
          <th field="origin">Origin</th> 
          <th field="wrapper">Wrapper</th> 
          <th field="shape">Shape</th> 
       </tr>
    </thead>        
</table>

<ul id="resultUl" style="width:550px">
</ul>

</body>
</html>
